@import "~styles/_global.scss";

@mixin linkStyle() {
  a {
    @include standardTransition();

    color: $white;
    text-decoration: none;

    &:hover,
    &:focus {
      color: $white;
      opacity: 0.5;
    }
  }
}

.header {
  z-index: $z-index-front;

  > div {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  &Link {
    @include linkStyle();
    @include setMargin($size-0, $size-0, $size-20, $size-0);

    font-size: $size-16;

    @media screen and (max-width: $medium) {
      text-align: center;
    }
  }

  &ActiveLink {
    color: $key-lime !important;
  }

  &HideInMobile {
    @media screen and (max-width: $medium) {
      display: none;
    }
  }

  &Hamburger {
    @include setFontSize($size-30);

    display: none;
    color: $white;
    cursor: pointer;

    @media screen and (max-width: $medium) {
      display: block;
    }
  }

  &Scroll {
    background-color: $black-80;

    @media screen and (max-width: $medium) {
      background-color: unset;
    }
  }

  &Mobile {
    background: transparent;
    position: static;

    &Nav {
      display: none;
    }

    @media screen and (max-width: $medium) {
      background: $mulberry-key-lime;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;

      &Nav {
        margin-bottom: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100%;

        > div {
          overflow: auto;
          width: 100%;
        }
      }

      &Bg {
        background: $black-70;
        height: 100%;
        width: 100%;
        overflow-y: scroll;
      }
    }
  }

  &Desktop {
    width: 100%;
    padding: 25px $size-34;
    box-sizing: border-box;
    margin-bottom: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    z-index: $z-index-front;

    @media screen and (max-width: $medium) {
      padding: 15px $size-10;
      position: static;
    }

    &Home {
      @include linkStyle();

      font-size: $size-30;
    }

    &Nav {
      &Links {
        @include setFontSize($size-18);

        display: flex;
        flex-direction: row;
        letter-spacing: 0.0571429em;
        text-transform: uppercase;

        > div {
          @include setMargin($size-0, $size-26, $size-0, $size-0);
        }

        > div:last-of-type {
          @include setMargin($size-0, $size-0, $size-0, $size-0);
        }

        @media screen and (max-width: $medium) {
          display: none;
        }
      }
    }
  }
}
